<template>
  <view class="content">
    <scroll-view
      class="scroll-view"
      :style="{ height: scrollViewHeight + 'px' }"
      :scroll-y="true"
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
    >
      <view class="flex-row items-center self-stretch section_2" style="margin-top: 100rpx">
        <view class="flex-row items-center">
          <image @tap="fhui" class="shrink-0 image_6" src="../../static/images/左边返回.png" />
          <text class="text ml-23" style="font-size: 30rpx">小智老师</text>
        </view>
        <image class="image_5" style="margin-left: 20rpx" src="../../static/images/log (1).png" />
      </view>
      <view id="scroll-view-content" class="msg-list">
        <view v-for="(item, index) in msgList" :key="index" class="msg-item">
          <img v-if="item.type == 1" class="img_1" src="../../static/images/log (1).png" />

          <view :style="{ 'margin-left': item.type == 2 ? 'auto' : '0' }" class="msg">
            <!-- <rich-text :nodes="item.msg" v-if="isdui"></rich-text> -->
            <!-- <view>{{ item.msg }}</view> -->
            <!-- <zero-markdown-view :markdown="item.msg"></zero-markdown-view> -->
            <ua-markdown :source="item.msg" />
          </view>

          <img v-if="item.type == 2" class="img_2" src="../../static/images/log (2).png" />
        </view>
      </view>
    </scroll-view>

    <view class="footer" ref="footer">
      <input
        type="text"
        v-model="keyword"
        class="txt"
        :disabled="isSend"
        placeholder="请输入关键词......"
      />

      <image @click="sendMessage()" class="image_9" src="../../static/images/stend.png" />

      <!-- <button type="primary" class="btn" @click="sendMessage()">{{ btnTxt }}</button> -->
    </view>
  </view>

  <!-- <view class="flex-col page">
    <view class="flex-col flex-1 group">

      <view class="flex-col justify-start self-end text-wrapper">
        <text class="font text_2">小智老师你能教我二元一次方程吗</text>
      </view>

      <view class="flex-col justify-start items-center self-start text-wrapper_2">
        <text class="font text_4">当然可以，你想知道什么呢</text>
      </view>

    </view>
  </view>-->
</template>
<script>
import uaMarkdown from '@/components/ua-markdown/ua-markdown.vue'
export default {
  components: {
    uaMarkdown,
  },
  data() {
    return {
      scrollTop: 0,
      scrollViewHeight: 1600,
      msgList: [],
      keyword: '',
      btnTxt: '发送',
      isSend: false,
      isdui: true,
    }
  },
  mounted() {
    // this.initHighLight()
  },
  onShow() {
    this.calculateHeight()

    // 当页面大小发生变化时，重新计算容器高度
    uni.getSystemInfo({
      success: () => {
        this.calculateHeight()
      },
    })
  },
  methods: {
    // 计算容器高度
    calculateHeight() {
      // 获取底部元素高度
      uni
        .createSelectorQuery()
        .in(this)
        .select('.footer')
        .boundingClientRect((rect) => {
          if (rect) {
            console.log(rect.height, '高度')
            console.log(uni.getSystemInfoSync().windowHeight, '这是')
            this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - rect.height - 44
          }
        })
        .exec()
    },
    // 发送信息
    sendMessage() {
      if (this.isSend) {
        this.showToast('请等待上一次对话结束！')
        return
      }
      const keyword = this.keyword
      if (!keyword) {
        this.showToast('请输入关键词！')
        return
      }
      this.isdui = true
      this.keyword = ''
      this.btnTxt = '加载中'
      this.isSend = true
      // 提示转圈圈加载中
      this.showToast('加载中')

      this.msgList.push({
        type: 2,
        msg: keyword,
      })

      // 发起请求
      uni.request({
        url: 'https://www.eoestudy.online/api/AIapi',
        method: 'POST',
        data: {
          keyword: keyword,
        },
        success: async (res) => {
          let d = res.data
          console.log(d, 'sdsds')

          if (d.data.code == 0 && d.data.data) {
            let text = d.data.data
            // .replace(/</g, '&lt;').replace(/>/g, '&gt;')
            // .replace(/\n\n/g, '<br>')
            // .replace(/\n/g, '<br>')
            // 这一步是需要进行把```给放下一换行才可以实现那个markedowm文档
            // let strArr = text.split('```')
            // let str = ''

            // strArr.forEach((item, index) => {
            //   console.log(item,'122312');
            //   if (index === strArr.length - 1) return (str = str + item)
            //   str = str + item + '\n' + '```'
            // })
            // console.log(str, 'str')
            this.msgList.push({
              type: 1,
              msg: '',
            })
            // 找到 ``` 的位置
            var index1 = text.indexOf('```')

            // 在找到的位置之前插入换行符
            if (index1 !== -1) {
              text = text.slice(0, index1) + '\n' + text.slice(index1)
            }
            // // 实现打字机效果
            //           let index = 0
            //           let timer = await setInterval(() => {
            //             if (text.length < index) {
            //               this.isdui = false
            //               clearInterval(timer)
            //             }
            //             this.msgList[this.msgList.length - 1].msg += text.substr(index, 1)
            //  // this.msgList[this.msgList.length - 1].msg = text
            //             this.scrollToBottom()
            //             index++
            //           }, 50)
            this.msgList[this.msgList.length - 1].msg = text
            this.scrollToBottom()
            console.log(this.msgList, '学习')
          } else {
            this.showToast(d.msg1)
          }
        },
        complete: () => {
          uni.hideLoading()
          this.btnTxt = '发送'
          this.isSend = false
        },
      })
    },
    // 通用提示封装
    showToast(title) {
      uni.showToast({
        title: title,
        icon: 'none',
        duration: 2000,
      })
    },
    // 实现自动滚动到最底部
    scrollToBottom() {
      // #ifdef MP-WEIXIN
      uni.nextTick(() => {
        uni
          .createSelectorQuery()
          .in(this)
          .select('#scroll-view-content')
          .boundingClientRect((res) => {
            let top = res.height - this.scrollViewHeight
            if (top > 0) {
              this.scrollTop = top
            }
          })
          .exec()
      })
      // #endif
    },
    //返回上一个页面
    fhui() {
      //返回上一个页面
      // 确定退出智能回答吗
      uni.showModal({
        title: '温馨提示~',
        content: '确定退出智能回答吗？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            uni.navigateBack({
              delta: 1,
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
  },
}
</script>

<style lang="scss">
.content {
  height: 100%;
  .msg-list {
    padding: 0rpx 24rpx;

    .msg-item:last-child {
      padding-bottom: 20rpx;
    }

    .msg-item {
      padding-top: 20rpx;
      text-align: left;
      display: flex;

      .img_1 {
        width: 72rpx;
        height: 72rpx;
        margin-right: 16rpx;
        min-width: 72rpx;
      }

      .img_2 {
        width: 72rpx;
        height: 72rpx;
        margin-left: 16rpx;
        min-width: 72rpx;
      }

      .msg {
        padding: 16rpx 30rpx;
        font-size: 28rpx;
        color: #303133;
        border-radius: 20rpx;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
        max-width: 600rpx;
      }
    }
  }

  .footer {
    width: 100%;
    border-top: 2rpx solid #ddd;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
    box-sizing: border-box;

    .txt {
      flex: 1;
      height: 80rpx;
      padding: 5rpx;
      border-radius: 5rpx;
      box-sizing: border-box;
      border: none;
      outline: none;
    }

    .btn {
      width: 150rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border: none;
      border-radius: 10rpx;
      cursor: pointer;
    }
  }
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #5e5ea3;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

page {
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 3.62rpx;
}

.mt-2 {
  margin-top: 3.62rpx;
}

.ml-4 {
  margin-left: 7.25rpx;
}

.mt-4 {
  margin-top: 7.25rpx;
}

.ml-6 {
  margin-left: 10.87rpx;
}

.mt-6 {
  margin-top: 10.87rpx;
}

.ml-8 {
  margin-left: 14.49rpx;
}

.mt-8 {
  margin-top: 14.49rpx;
}

.ml-10 {
  margin-left: 18.12rpx;
}

.mt-10 {
  margin-top: 18.12rpx;
}

.ml-12 {
  margin-left: 21.74rpx;
}

.mt-12 {
  margin-top: 21.74rpx;
}

.ml-14 {
  margin-left: 25.36rpx;
}

.mt-14 {
  margin-top: 25.36rpx;
}

.ml-16 {
  margin-left: 28.99rpx;
}

.mt-16 {
  margin-top: 28.99rpx;
}

.ml-18 {
  margin-left: 32.61rpx;
}

.mt-18 {
  margin-top: 32.61rpx;
}

.ml-20 {
  margin-left: 36.23rpx;
}

.mt-20 {
  margin-top: 36.23rpx;
}

.ml-22 {
  margin-left: 39.86rpx;
}

.mt-22 {
  margin-top: 39.86rpx;
}

.ml-24 {
  margin-left: 43.48rpx;
}

.mt-24 {
  margin-top: 43.48rpx;
}

.ml-26 {
  margin-left: 47.1rpx;
}

.mt-26 {
  margin-top: 47.1rpx;
}

.ml-28 {
  margin-left: 50.72rpx;
}

.mt-28 {
  margin-top: 50.72rpx;
}

.ml-30 {
  margin-left: 54.35rpx;
}

.mt-30 {
  margin-top: 54.35rpx;
}

.ml-32 {
  margin-left: 57.97rpx;
}

.mt-32 {
  margin-top: 57.97rpx;
}

.ml-34 {
  margin-left: 61.59rpx;
}

.mt-34 {
  margin-top: 61.59rpx;
}

.ml-36 {
  margin-left: 65.22rpx;
}

.mt-36 {
  margin-top: 65.22rpx;
}

.ml-38 {
  margin-left: 68.84rpx;
}

.mt-38 {
  margin-top: 68.84rpx;
}

.ml-40 {
  margin-left: 72.46rpx;
}

.mt-40 {
  margin-top: 72.46rpx;
}

.ml-42 {
  margin-left: 76.09rpx;
}

.mt-42 {
  margin-top: 76.09rpx;
}

.ml-44 {
  margin-left: 79.71rpx;
}

.mt-44 {
  margin-top: 79.71rpx;
}

.ml-46 {
  margin-left: 83.33rpx;
}

.mt-46 {
  margin-top: 83.33rpx;
}

.ml-48 {
  margin-left: 86.96rpx;
}

.mt-48 {
  margin-top: 86.96rpx;
}

.ml-50 {
  margin-left: 90.58rpx;
}

.mt-50 {
  margin-top: 90.58rpx;
}

.ml-52 {
  margin-left: 94.2rpx;
}

.mt-52 {
  margin-top: 94.2rpx;
}

.ml-54 {
  margin-left: 97.83rpx;
}

.mt-54 {
  margin-top: 97.83rpx;
}

.ml-56 {
  margin-left: 101.45rpx;
}

.mt-56 {
  margin-top: 101.45rpx;
}

.ml-58 {
  margin-left: 105.07rpx;
}

.mt-58 {
  margin-top: 105.07rpx;
}

.ml-60 {
  margin-left: 108.7rpx;
}

.mt-60 {
  margin-top: 108.7rpx;
}

.ml-62 {
  margin-left: 112.32rpx;
}

.mt-62 {
  margin-top: 112.32rpx;
}

.ml-64 {
  margin-left: 115.94rpx;
}

.mt-64 {
  margin-top: 115.94rpx;
}

.ml-66 {
  margin-left: 119.57rpx;
}

.mt-66 {
  margin-top: 119.57rpx;
}

.ml-68 {
  margin-left: 123.19rpx;
}

.mt-68 {
  margin-top: 123.19rpx;
}

.ml-70 {
  margin-left: 126.81rpx;
}

.mt-70 {
  margin-top: 126.81rpx;
}

.ml-72 {
  margin-left: 130.43rpx;
}

.mt-72 {
  margin-top: 130.43rpx;
}

.ml-74 {
  margin-left: 134.06rpx;
}

.mt-74 {
  margin-top: 134.06rpx;
}

.ml-76 {
  margin-left: 137.68rpx;
}

.mt-76 {
  margin-top: 137.68rpx;
}

.ml-78 {
  margin-left: 141.3rpx;
}

.mt-78 {
  margin-top: 141.3rpx;
}

.ml-80 {
  margin-left: 144.93rpx;
}

.mt-80 {
  margin-top: 144.93rpx;
}

.ml-82 {
  margin-left: 148.55rpx;
}

.mt-82 {
  margin-top: 148.55rpx;
}

.ml-84 {
  margin-left: 152.17rpx;
}

.mt-84 {
  margin-top: 152.17rpx;
}

.ml-86 {
  margin-left: 155.8rpx;
}

.mt-86 {
  margin-top: 155.8rpx;
}

.ml-88 {
  margin-left: 159.42rpx;
}

.mt-88 {
  margin-top: 159.42rpx;
}

.ml-90 {
  margin-left: 163.04rpx;
}

.mt-90 {
  margin-top: 163.04rpx;
}

.ml-92 {
  margin-left: 166.67rpx;
}

.mt-92 {
  margin-top: 166.67rpx;
}

.ml-94 {
  margin-left: 170.29rpx;
}

.mt-94 {
  margin-top: 170.29rpx;
}

.ml-96 {
  margin-left: 173.91rpx;
}

.mt-96 {
  margin-top: 173.91rpx;
}

.ml-98 {
  margin-left: 177.54rpx;
}

.mt-98 {
  margin-top: 177.54rpx;
}

.ml-100 {
  margin-left: 181.16rpx;
}

.mt-100 {
  margin-top: 181.16rpx;
}
.ml-23 {
  margin-left: 41.67rpx;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  overflow-y: auto;
}
.section_2 {
  padding: 0 43.48rpx 56.16rpx;
  background-color: #fafafa;
}
.image_6 {
  width: 25.36rpx;
  height: 39.86rpx;
}
.text {
  color: #2f2d51;
  font-size: 57.97rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 52.99rpx;
}
.image_5 {
  margin-right: 18.12rpx;
  filter: drop-shadow(0rpx 7.25rpx 10.87rpx #0000001a);
  border-radius: 50%;
  width: 65.22rpx;
  height: 65.22rpx;
}
.text-wrapper {
  margin-right: 34.42rpx;
  margin-top: 119.57rpx;
  padding: 47.1rpx 0 43.48rpx;
  background-color: #3e3c6d;
  border-radius: 59.78rpx;
  box-shadow: 0rpx 7.25rpx 21.74rpx #00000008;
}
.font {
  font-size: 28.99rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 27.5rpx;
}
.text_2 {
  margin-left: 18.12rpx;
  margin-right: 14.49rpx;
  color: #ffffff;
  line-height: 26.96rpx;
}
.section_3 {
  margin-left: 43.48rpx;
  margin-top: 72.46rpx;
  padding: 36.23rpx 43.48rpx;
  background-color: #ffffff;
  border-radius: 59.78rpx;
  box-shadow: 0rpx 7.25rpx 21.74rpx #00000008;
  border-left: solid 1.81rpx #00000014;
  border-right: solid 1.81rpx #00000014;
  border-top: solid 1.81rpx #00000014;
  border-bottom: solid 1.81rpx #00000014;
}
.text_3 {
  color: #a9a4b5;
  font-size: 43.48rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 31.56rpx;
}
.group_2 {
  margin-right: 119.57rpx;
}
.image_7 {
  width: 54.35rpx;
  height: 32.61rpx;
}
.section_5 {
  background-color: #594d77;
  border-radius: 5.43rpx;
  width: 10.87rpx;
  height: 18.12rpx;
}
.section_4 {
  background-color: #594d77;
  border-radius: 5.43rpx;
  width: 10.87rpx;
  height: 39.86rpx;
}
.section_6 {
  background-color: #594d77;
  border-radius: 5.43rpx;
  width: 10.87rpx;
  height: 21.74rpx;
}
.image_8 {
  width: 54.35rpx;
  height: 25.36rpx;
}
.text-wrapper_2 {
  margin-left: 43.48rpx;
  margin-top: 72.46rpx;
  padding: 47.1rpx 0 43.48rpx;
  background-color: #ffffff;
  border-radius: 59.78rpx;
  box-shadow: 0rpx 7.25rpx 21.74rpx #00000008;
  width: 471.01rpx;
  border-left: solid 1.81rpx #00000014;
  border-right: solid 1.81rpx #00000014;
  border-top: solid 1.81rpx #00000014;
  border-bottom: solid 1.81rpx #00000014;
}
.text_4 {
  color: #594d77;
}
.section_7 {
  margin-left: 47.1rpx;
  margin-top: 68.84rpx;
  background-color: #ffffff;
  border-radius: 59.78rpx;
  box-shadow: 0rpx 7.25rpx 21.74rpx #00000008;
  width: 471.01rpx;
  height: 119.57rpx;
  border-left: solid 1.81rpx #00000014;
  border-right: solid 1.81rpx #00000014;
  border-top: solid 1.81rpx #00000014;
  border-bottom: solid 1.81rpx #00000014;
}
.section_8 {
  align-self: flex-end;
  margin-right: 34.42rpx;
  margin-top: 77.9rpx;
}
.input {
  background-color: #3e3c6d;
  border-radius: 59.78rpx;
  box-shadow: 0rpx 7.25rpx 21.74rpx #00000008;
  width: 471.01rpx;
  height: 119.57rpx;
}
.group_3 {
  margin-top: 74.28rpx;
}
.view {
  margin-right: 34.42rpx;
}
.section_9 {
  margin-right: 50.72rpx;
  padding: 57.97rpx 0 19.93rpx;
  background-image: linear-gradient(180deg, #ffffff00 0%, #ffffff 50%);
}
.image-wrapper {
  margin-left: 36.23rpx;
  padding: 21.74rpx 0 18.12rpx;
  background-color: #ffffff;
  border-radius: 59.78rpx;
  box-shadow: 0rpx 7.25rpx 21.74rpx #00000008;
  width: 688.41rpx;
  border-left: solid 3.62rpx #00000014;
  border-right: solid 3.62rpx #00000014;
  border-top: solid 3.62rpx #00000014;
  border-bottom: solid 3.62rpx #00000014;
}
.image_9 {
  margin-right: 32.61rpx;
  border-radius: 50%;
  width: 69.8rpx;
  height: 61.59rpx;
}
</style>
